import React, { PureComponent } from 'react';
// import { connect } from 'react-redux';
import { fetchHomeSlider } from '../../../api/home.js';
import Loading from '../../../components/Loading';
import HomeSlider from './HomeSlider.jsx';

class SliderWrapper extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      index: 0,
      data: []
    }
  }

  componentWillMount() {
    fetchHomeSlider().then(data => {
      this.setState({data})
    })
  }

  handleIndexChange = (index) => {
    this.setState({index})
  }

  render() {
    // data= [[], [], [], ...]
    const {index, data} = this.state;
    if(!data.length) {
      return <Loading/>
    }
    return (
      <HomeSlider onIndexChange={this.handleIndexChange} index={index} data={data}/>
    )
  }
}

export default SliderWrapper;
// export default connect()(SliderWrapper);